<template>
    <div class="main">
        <nav-bar :head="head"></nav-bar>
        <div class="login-main">
            <van-form @submit="onSubmit">
                <div class="main-input">
                    <van-field v-model="account" name="account" placeholder="账户名" :rules="[{ required: true,validator, message: '请填写账户名，8位字母数字组合' }]"/>
                    <van-field type="password" v-model="password" name="password" placeholder="密码" :rules="[{ required: true, message: '请输入密码' }]"/>
                    <p class="forget">忘记密码？</p>
                    <van-button color="#ff5c57" round native-type="submit">登录</van-button>
                    <p class="register">
                        没有账号？<b @click="reg">注册</b>
                    </p>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Button } from 'vant';
import { Form } from 'vant';
import { Field } from 'vant';
import { Toast } from 'vant';

Vue.use(Toast);
Vue.use(Field);
Vue.use(Button);
Vue.use(Form);
export default {
    name: "login",
    data() {
        return {
            account: '',
            password: '',
            head: '用户登录'

        }
    },
    methods: {
        reg: function() {
            this.$router.replace('/register')
        },
        validator(val) {
            return /^(?![0-9]+$)(?![a-z]+$)[0-9a-z]{8}$/.test(val);
        },
        onSubmit: function () {
            var this_ = this;
            Toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: '登录中',
            });
            var data = {
                'account' : this_.account,
                'password' : this_.password
            };
            this_.$api.login.Login(data).then(res => {
                var response = res.data;
                if (response.success){
                    localStorage.setItem("token",response.data.token);
                    localStorage.setItem("userInfo",JSON.stringify(response.data));
                    Toast.clear();
                    Toast.success(response.msg);
                    setTimeout(function () {
                        this_.$router.replace('/')
                    },1200)
                }else{
                    Toast.fail(response.msg);
                }
            })
        }
    }
}
</script>

<style scoped>
    .main{
        background-color: rgb(249,186,71);
        background-image: url("/images/background/login-bg.png");
        background-size: contain;
        height: 100vh;
    }
    .login-main{
        position: absolute;
        top: 40vh;
        width: 62vw;
        text-align: center;
        padding: 19vw;
        height:25vh;
    }
    .van-field{
        background: white;
        border: 2px solid;
        border-radius: 10px;
        margin-bottom: 1rem;
        text-align: center;
    }
    .van-cell{
        padding: 8px 12px !important;
    }
    .forget{
        width: 100%;
        text-align: right;
        margin-top: 4px;
        color: #5a5a5a;
        font-size: 12px;
    }
    .van-button--round{
        width: 100%;
    }
    .register{
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #5a5a5a;
    }
</style>
